<template>
    <div class="container">
      <main class="main">
        <div class="header-content">
          <el-button @click="returnStore">返回</el-button>
        </div>
        <div class="product-info">
          <div class="product-image">
            <el-image :src='url'/>
          </div>
          <div class="product-details">
            <h2 class="product-title">Apple 苹果 iPhone 15 (A3092) 256GB 蓝色 支持移动联通电信5G 双卡双待手机</h2>
            <p class="product-price">¥6149.00</p>
            <p class="product-description">成为京东企业会员,实办公/福利商品补贴3000元!</p>
            <p class="promotion">满3000减200</p>
            <p class="promotion">PLUS会员立减,可与PLUS价、满减等优惠叠加使用</p>
            <p class="promotion">满减优惠:购指定Apple产品满800元送App Store充值卡200元优惠券(数量有限,返完为止)</p>
            <div class="product-options">
              <div class="color-options">
                <label class="option-label">颜色:</label>
                <div class="color-buttons">
                  <button v-for="color in colors" :key="color" :class="['color-btn', selectedColor === color ? 'active' : '']"
                    @click="selectedColor = color">{{ color }}</button>
                </div>
                <label class="option-label">容量:</label>
                <el-select v-model="selectedStorage" placeholder="选择容量">
                  <el-option v-for="option in storageOptions" :key="option.value" :label="option.label" :value="option.value">
                  </el-option>
                </el-select>
              </div>
              <div class="storage-options">
                
              </div>
            </div>
            <div class="product-accessories">
              <button class="accessory-btn">1年无限续费手机电池</button>
              <button class="accessory-btn">2年保修4年电池</button>
              <button class="accessory-btn">学习老师优惠券</button>
              <button class="add-to-cart">加入购物车</button>
            </div>
          </div>
        </div>
      </main>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { ElSelect, ElOption } from 'element-plus'
import router from '@/router';

  const url = 'public/images/product/iphone.png'
  const colors = ['粉色', '蓝色', '绿色', '黑色']
  const selectedColor = ref('蓝色')
  
  const storageOptions = [
    { label: '128GB', value: '128GB' },
    { label: '256GB', value: '256GB' },
    { label: '512GB', value: '512GB' }
  ]
  const selectedStorage = ref('256GB')

  //返回商品首页
  function returnStore(){
    router.push('/store')
  }
  </script>
  
  <style scoped>
  .container {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }
  
  .header {
    background-color: #f5f5f5;
    padding: 10px 20px;
  }
  
  .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .logo {
    height: 40px;
  }
  
  .add-to-cart {
    background-color: #e60012;
    color: #fff;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .main {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 20px;
  }
  
  .product-info {
    display: flex;
    gap: 20px;
  }
  
  .product-image {
    width: 400px;
  }
  
  .product-image img {
    width: 100%;
    height: auto;
  }
  
  .product-details {
    flex: 1;
  }
  
  .product-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  
  .product-price {
    font-size: 20px;
    font-weight: bold;
    color: #e60012;
    margin-bottom: 10px;
  }
  
  .product-description,
  .promotion {
    margin-bottom: 10px;
  }
  
  .product-options {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  
  .option-label {
    font-weight: bold;
    margin-right: 10px;
  }
  
  .color-buttons {
    display: flex;
    gap: 10px;
  }
  
  .color-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #ccc;
    cursor: pointer;
  }
  
  .color-btn.active {
    border-color: #e60012;
  }
  
  .product-accessories {
    display: flex;
    gap: 10px;
  }
  
  .accessory-btn {
    background-color: #f5f5f5;
    color: #333;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  </style>